<template>
    <div id="app" v-cloak>
        <!-- <lottieLoading v-if='showAni'></lottieLoading> -->
        <router-view class="child-view" ref="routerView" :key='new Date().getTime()'></router-view>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import Header from './components/Header/Header'
import Footer from './components/Footer/Footer'

export default {
    name: 'App',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            showStyle: false,
            isRun: false,
            slogan: null,
            enterAnimate: "animated fadeInUp",
            leaveAnimate: "animated fadeOutDown",
            isScroll: false,
            showAni: false,
        }
    },
    mounted() {
        if (this._isMobile()) {
            this.$router.replace('/mobileIndex');
        }
    },
    methods: {
        _isMobile() {
            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            return flag;
        }
    },
    computed: {
        // ...mapGetters([
        //     'isLogin',
        //     'user',
        //     'progress'
        // ]),
    },
    watch: {
    },

}
</script>

<style lang="less">
@import "./assets/common.less";
@import "assets/css/animate.css";
[v-cloak] {
    display: none !important;
}
@font-face {
    /* font-properties */
    font-family: MicrosoftYaqiHeiLight;
    src: url("./assets/font/MicrosoftYaqiHeiLight-2.ttf");
    /* IE9 */
}
@font-face {
    /* font-properties */
    font-family: Cousine;
    src: url("./assets/font/Cousine-Regular-1.ttf");
    /* IE9 */
}
@font-face {
    /* font-properties */
    font-family: OfficeCode;
    src: url("./assets/font/OfficeCode.ttf");
    /* IE9 */
}
@font-face {
    /* font-properties */
    font-family: consola;
    src: url("./assets/font/consola-1.ttf");
    /* IE9 */
}
* {
    font-family: consola, OfficeCode, MicrosoftYaqiHeiLight;
}
#app {
    height: 100%;
    position: relative;
    overflow: hidden;
}
html,
body {
    overflow: hidden !important;
    height: 100%;
}
.el-progress {
    position: absolute !important;
    height: 8px !important;
    z-index: 99999 !important;
    width: 100% !important;
    top: -8px;
}
</style>
